<template>
  <div class="app-container">
    <el-row :gutter="20" type="flex" justify="center" align="middle">  <!-- 水平居中：type="flex" justify="center" align="middle"-->
      <el-col :span="14" :xs="24"  style="background-color: rgb(6, 26, 72);border: 1px solid #0c1e4b;padding: 30px 40px 30px 40px">
        <div style="text-align: center;padding-bottom: 3%;font-size: 20px;font-weight:900;color:#5DCBFF">
           <span>曝气算法参数配置</span>
        </div>
      <!-- 添加或修改对话框 -->
      <el-form ref="form":model="form" :rules="rules" label-width="80px" >
        <el-row v-loading="loading">
          <el-col :span="12">
            <el-form-item label="视频图像的宽度参数" prop="iwidth">
              <el-input v-model="form.iwidth"  placeholder="0" oninput="value=value.replace(/[^\d]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频图像的高度参数" prop="iheight">
              <el-input v-model="form.iheight"  placeholder="0" oninput="value=value.replace(/[^\d]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频图像的缓冲区一行字节数大小" prop="stride">
              <el-input v-model="form.stride"  placeholder="0" oninput="value=value.replace(/[^\d]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="识别算法的目标检测置信度" prop="_boxThreshold_input">
              <el-input v-model="form._boxThreshold_input"  placeholder="0.00" oninput="value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="识别算法目标检测类别置信度" prop="classThreshold_input">
              <el-input v-model="form.classThreshold_input"  placeholder="0.00" oninput="value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="识别算法的非极大值抑制阈值" prop="_nmsThreshold_input">
              <el-input v-model="form._nmsThreshold_input"  placeholder="0.00" oninput="value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="识别算法的目标轮廓点数阈值" prop="_maskThreshold_input">
              <el-input v-model="form._maskThreshold_input"  placeholder="0.00" oninput="value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="识别算法的报警阈值的占比" prop="_fRatioWhite">
              <el-input v-model="form._fRatioWhite"  placeholder="0.00" oninput="value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频识别抽帧值每隔几帧识别一次" prop="_iFrameInterval" >
              <el-input v-model="form._iFrameInterval" placeholder="0" oninput="value=value.replace(/[^\d]/g,'')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设置参数视频图像的通道数量" prop="iflag">
              <el-input v-model="form.iflag"  placeholder="0" oninput="value=value.replace(/[^\d]/g,'')"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        <div class="dialog-footer" style="text-align: center;padding-top:2%">
        <el-button type="primary" @click="submitForm">设置配置参数</el-button>
      </div>
      </el-col>
    </el-row>
    </div>
</template>
<script>
import "@/assets/styles/robt-bg.css";
import {addAerationparam, getInfo} from "@/api/robot/aerationparam/aerationparam";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
      },
      id:undefined,
      iwidth:undefined,
      iheight:undefined,
      stride:undefined,
      iflag:undefined,
      _boxThreshold_input:undefined,
      classThreshold_input:undefined,
      _nmsThreshold_input:undefined,
      _maskThreshold_input:undefined,
      _fRatioWhite:undefined,
      _iFrameInterval:undefined,
      // 表单校验
      rules: {
      }
    };
  },
  //初始化配置
  created() {
    this.getInfo();
  },
  methods: {
    /** 查询配置 */
    getInfo() {
    /* this.reset();*/
      this.loading = true;
      getInfo().then(response => {
        this.form = response.data;
        this.loading = false;
      });
    }, //表单重置
    reset() {
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
         if (valid) {
            addAerationparam(this.form).then(response => {
              this.$modal.msgSuccess("参数设置成功！");
              this.getInfo();
            });
         }
      });
    }
  }
};
</script>
